<template>
	<view>
		<u-swiper
            :list="goodData.urls"
            :showTitle="false"
			:indicator='true'
            :autoplay="false"
			@change="e => currentNum = e.current"
            circular
			previousMargin="30"
            nextMargin="30"
            radius="5"
			height="450rpx"
            bgColor="#ffffff"
			@click="handlePreviewImage()"
    >
		<view
            slot="indicator"
            class="indicator-num"
        >
                <text class="indicator-num__text">{{ currentNum + 1 }}/{{ goodData.urls.length }}</text>
        </view>
	</u-swiper>
	<view class="goods_price">
	    ￥{{goodData.price}}
	</view>
	<view class="goods_name_row">
		<text class="goodDetailText">商品描述</text>
	    <view class="goods_name">{{goodData.detail}}</view>
	  <!--  <view class="goods_collect">
	        <text class="iconfont icon-shoucang"></text>
	         <view class="collect_text">收藏</view> 
	    </view> -->
	</view>
	<view class="wxNumCss">
		<text class="Title">联系方式</text>
		
		<!-- <text></text> -->
		<view class="contact">
			<u-tooltip text="DORAEMONLJR" overlay></u-tooltip>
		</view>
		 
	</view>
	
	<view class="areaCss">
		<text class="Title">地址</text>
		<text>海珠校区D栋1242</text>
	</view>
	
	<view class="btm_tool">
		<view class="tool_item copyCss" @click="copyWxNum()">
			<image  class="fuzhiIcon" style="width: 40rpx;" src="http://1.14.247.152:9797/images/14205icon-.png" mode="widthFix" @click=""></image>
			<text>复制联系方式</text>
		</view>
	    <view class="tool_item">
			<image src="http://1.14.247.152:9797/images/13226分享.png" mode="widthFix"></image>
	        <view>分享</view>
	        <button open-type="share">1</button>
	    </view>
	    <!-- <navigator open-type="switchTab" url="/pages/cart/cart" class="tool_item">
	        <view class="iconfont icon-gouwuche"></view>
	        <view>购物车</view>
	    </navigator> -->
	   <!-- <view class="tool_item share" bindtap="handleCartAdd">
			
	        <text>分享</text>
	    </view> -->
	  
	</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodData: {},
				currentNum:0,
			};
		},
		onLoad(res){
			console.log('商品详情里面的onloadId',res.goodId)
			this.getGoodDetail(res.goodId)
		},
		methods:{
			swiperChange(e){
				console.log(e)
			},
			handlePreviewImage(e){
			    console.log('预览');
				console.log(e)
			    const urls = this.goodData.urls
			    const current = this.goodData.urls[e];
			    wx.previewImage({
			        current: current, // 当前显示图片的http链接
			        urls: urls// 需要预览的图片http链接列表
			      })
			},
			async getGoodDetail(goodId){
				uni.showLoading({
					title: '加载中'
				})
				let header = new Object
				header.Authority = getApp().globalData.Authority
				let res = await getApp().UniRequest("/twohandbook/goods/byId?id="+goodId,"GET","",header)
				console.log('获取商品详情信息',res)
				if(res.code==20000){
					this.goodData=res.data.detail;
					uni.hideLoading()
					console.log('this.goodData',this.goodData)
				}
			},
			 copyWxNum(){
				console.log('复制按钮被点了！')
				wx.setClipboardData({
				      data:'47658i756',
				      success:  (res)=> {
						  wx.showToast({
						    title: '复制成功',
						    icon: 'success',
						    duration: 1000
						  })
				        console.log("复制成功:", res)
						
				      },
				    })
			},
		}
	}
</script>

<style lang="scss">
	.indicator-num {
        padding: 2px 0;
        background-color: rgba(0, 0, 0, 0.35);
        border-radius: 100px;
        width: 35px;
        @include flex;
        justify-content: center;

        &__text {
             color: #FFFFFF;
             font-size: 12px;
         }
    }
	.goods_price{
		padding: 15rpx;
		font-size: 40rpx;
		font-weight: 600;
		color: #eb4450;
		margin-top: 10rpx;
		margin-left: 33rpx;
	}
	.goods_name_row{
		border-top: 0.1px solid #dedede;
	    border-bottom: 0.1px solid #dedede;
	    padding: 24rpx 0 10rpx 30rpx;
	    display: flex;
		align-items: center;
		width: 90%;
		margin: 0 auto;
		.goodDetailText{
			flex: 2;
			font-weight: 600;
		}
	    .goods_name{
	        flex: 6;
	        color: #000;
	        font-size: 28rpx;
	        padding: 0 10rpx;
	// 超过2行出现...
	        display: -webkit-box;
	        overflow: hidden;
	        -webkit-box-orient: vertical;
	        -webkit-line-clamp: 2;
	    }
	    // .goods_collect{
	    //     flex: 1;
	    //     // text-align: center;
	    //     display: flex;
	    //     flex-direction: column;
	    //     justify-content: center;
	    //     align-items: center;
	    //     border-left: 3rpx solid #000;
	    //     margin-left: 5rpx;
	    //     .iconfont{
	    //         width: 28rpx;
	    //     }
	    //     .collect_text{}
	    // }
	}
	.wxNumCss{
		font-size: 30rpx;
		border-bottom: 0.1rpx solid #dedede;
		padding: 24rpx 0 10rpx 30rpx;
		display:flex;
		width: 90%;
		margin: 0 auto;
		.Title{
			flex:2;
			font-weight: 600;
		}
		.contact{
			flex:6;
		}
	}
	.areaCss{
		font-size: 30rpx;
		border-bottom: 0.1rpx solid #dedede;
		padding: 24rpx 0 10rpx 30rpx;
		display:flex;
		width: 90%;
		margin: 0 auto;
		.Title{
		    flex: 1.7;
		    font-weight: 600;
		    padding-left: 33rpx;
		}
		text{
			flex:6;
		}
	}
	.btm_tool{
	    border-top: 1px solid #ccc;
	    position: fixed;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	    height: 90rpx;
	    background-color: #fff;
	    display: flex;
	    .tool_item{
	        flex: 1;
	        display: flex;
	        // flex-direction: column;
	        justify-content: center;
	        align-items: center;
	        position: relative;
			background-color: #ffa500;
			color: #fff;
			image{
			    width: 40rpx;
			    margin-right: 10rpx;
			}
	        button{
	            position: absolute;
	            top: 0;
	            left: 0;
	            width: 100%;
	            height: 100%;
	            opacity: 0;
	        }
	    }
	    .share{
	        flex: 1;
	        display: flex;
	        // flex-direction: column;
	        justify-content: center;
	        align-items: center;
	        background-color: #ffa500;
	        color: #fff;
	        font-size: 30rpx;
	        font-weight: 600;
	    }
	    .copyCss{
	        flex: 2;
	        display: flex;
	        // flex-direction: column;
	        justify-content: center;
	        align-items: center;
	        background-color: #eb4450;
	        color: #fff;
	        font-size: 30rpx;
	        font-weight: 600;
	    }
	}
</style>
